import { Breadcrumb } from 'antd'
import PropTypes from 'prop-types'
import { Link } from '@umijs/max'
import styles from './index.less'

const BreadcrumbBar = function ({ menu }) {
  return (
    <div className={styles.breadcrumb_bar}>
      <Breadcrumb separator={<i className="iconfont icon-you" />}>
        {menu.map((item) => {
          const { name, href } = item || {}
          return (
            <Breadcrumb.Item key="breadcrumb_$">
              {href ? <Link to={href}>{name}</Link> : <span>{name}</span>}
            </Breadcrumb.Item>
          )
        })}
      </Breadcrumb>
    </div>
  )
}

BreadcrumbBar.defaultProps = {
  menu: [],
}

BreadcrumbBar.propTypes = {
  menu: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      href: PropTypes.string,
    }),
  ),
}

export default BreadcrumbBar
